import React, { Component } from 'react'
import { connect } from 'react-redux'

import {
  mouseEnterAction,
  mouseLeaveAction
} from '../store/actionCreator'

import code from '../../../statics/images/code.png'
import {
  DownloadWrapper,
  DownloadInfo,
  DownloadCode
} from '../style'


class Download extends Component {
  getCode() {
    if (this.props.isHover) {
      return (
        <DownloadCode>
          <img alt="" src={code} className="code" />
          <div className="triangle"></div>
        </DownloadCode>
      )
    }
  }

  render() {
    return (
      <DownloadWrapper 
        onMouseEnter={this.props.handleMouseEnter}
        onMouseLeave={this.props.handleMouseLeave}
      >
        <img className="qrcode" src={code} alt="" />
        <DownloadInfo>
          <div className="title">
            下载简书手机App
            <i className="iconfont ic-link"></i>
          </div>
          <div className="desc">随时随地发现和创作内容</div>
        </DownloadInfo>
        {this.getCode()}
      </DownloadWrapper>
    )
  }
}

const mapState = (state) => ({
  isHover: state.getIn(['home', 'downloadHover'])
})

const mapDispatch = (dispatch) => {
  return {
    handleMouseEnter() {
      dispatch(mouseEnterAction())
    },
    handleMouseLeave() {
      dispatch(mouseLeaveAction())
    }
  }
}

export default connect(mapState, mapDispatch)(Download)